<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>

    <title>Viewing</title>
     <meta http-equiv="REFRESH" content="35;url=/android/viewing4.jsf">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="author" content=""/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <link rel="stylesheet" href="css/main.css"/>

    <link href="favicon.ico" rel="shortcut icon"/>
    <link href="apple-icon.png" rel="apple-touch-icon"/>

</head>

<body>
<f:view>
    <f:loadBundle basename="ResourceBundle" var="bundle"/>
    <h:form id="viewing4Form">
        <div class="android-wrap">
            <div id="wrapper">
                <div id="header">
                    <h1 class="title">Ad Viewing</h1>
                    <ul class="app-controls">
                        <li>
                                <a href="#" class="appc-back disabled">Back</a></li>
                        <li>
                                 <a href="#" class="appc-home disabled">Home</a>
                        </li>
                    </ul>
                </div>

                <p class="bonus-counter">Bonuses per session: <strong>${appBean.bonuses}</strong></p>


                <div id="content">
                    <div class="entry">

                        <h:panelGroup rendered="#{appBean.video1}">
                            <h3>${appBean.firstVideoLabel}</h3>
                            <a href="#">
                                <div style="text-align: center; margin: auto">
                                    <object type="application/x-shockwave-flash" style="width:280px; height:200px;"
                                            data="${appBean.firstVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0">
                                        <param name="movie"
                                               value="${appBean.firstVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0"/>
                                    </object>
                                </div>
                            </a>
                            <em>
                                ${appBean.firstVideoDescription}
                            </em>
                        </h:panelGroup>

                        <h:panelGroup rendered="#{appBean.video2}">
                            <h3>${appBean.secondVideoLabel}</h3>
                            <a href="#">
                                <div style="text-align: center; margin: auto">
                                    <object type="application/x-shockwave-flash" style="width:280px; height:200px;"
                                            data="${appBean.secondVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0">
                                        <param name="movie"
                                               value="${appBean.secondVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0"/>
                                    </object>
                                </div>
                            </a>
                            <em>
                                ${appBean.secondVideoDescription}
                            </em>
                        </h:panelGroup>

                        <h:panelGroup rendered="#{appBean.video3}">
                            <h3>${appBean.thirdVideoLabel}</h3>
                            <a href="#">
                                <div style="text-align: center; margin: auto">
                                    <object type="application/x-shockwave-flash" style="width:280px; height:200px;"
                                            data="${appBean.thirdVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0">
                                        <param name="movie"
                                               value="${appBean.thirdVideoContent};autoplay=1&amp;showsearch=0&amp;showinfo=0"/>
                                    </object>
                                </div>
                            </a>
                            <em>
                                ${appBean.thirdVideoDescription}
                            </em>
                        </h:panelGroup>
                    </div>
                </div>

                <div id="control-panel">
                    <ul>
                        <li class="cp-btn refresh-btn icon-only">
                                <a href="#">Refresh</a>
                            <%--<h:commandLink action="#{appBean.refresh}" value="Next"/>--%>
                        </li>
                        <li class="cp-btn mute-btn icon-only">
                            <a href="#">Mute</a>
                        </li>




                            <li class="cp-btn next-btn   disabled">
                                <a href="#">Next</a>
                            </li>

                            <li class="cp-btn prev-btn  disabled">
                                <a href="#">Prev</a>
                            </li>



                            <%--<li class="cp-btn next-btn">--%>
                            <%--<a href="#">Next</a>--%>
                            <%--</li>--%>
                            <%--<li class="cp-btn prev-btn">--%>
                            <%--<a href="#">Prev</a>--%>
                            <%--</li>--%>


                    </ul>
                </div>
            </div>
                <a href="#" class="android-control back-btn disabled">Back</a>
            <%--<h:commandLink action="#{appBean.adViewing}" value="Back" styleClass="android-control back-btn"/>--%>

        </div>
    </h:form>
</f:view>
</body>
</html>